<!DOCTYPE html>
<!--
    
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewPortId" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
        <title>Old Stuff Shopping</title>
	
    <link rel="stylesheet" href="css/jquery.mobile.min.css" /-->
	<link rel="stylesheet" href="css/jquery.mobile-ui.min.css" /-->
	<!--link rel="stylesheet" href="css/custom-theme.min.css" /-->
	<!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.structure.min.css" />
	<link rel="stylesheet" href="css/jquery.mobile-1.3.1.theme.min.css" />
	<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" /-->
	<link rel="stylesheet" href="css/index.css" />
	
	<!--script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile.custom.min.js"></script>
	<script src="js/jquery.mobile-1.3.1.min.js"></script-->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.mobile.min.js"></script>
	<script src="js/jquery.mobile-ui-min.js"></script>
	<script src="js/index.js"></script>
	
	<script type="text/javascript" charset="utf-8">
            InitialStorage();
	</script>
</head>
<body>
    
<!-- Sign In Form implementation-->
        <div data-role="page" id="signIn" data-dom-cache="true">
         
            <div data-role="header">
                <h1>Sign In</h1>
            </div>
         
            <div data-role="content">
		<h2 align="center">Old Stuff Shopping</h2>
                <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
                    <label for="login-email" class="ui-input-text" id="label_login_email"><img style="height: 2em; width: 2em; margin-bottom: -8px;" src="./img/user.png"><b> Email</b></label>
                    <input type="text" name="login" id="login-email" value="" placeholder="Email"/>
                </div>
                
                <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
                    <label for="password" class="ui-input-text" id="label_login_password"><img style="height: 2em; width: 2em; margin-bottom: -8px;" src="./img/key.png"><b> Password</b></label>
                    <input type="password" name="password" id="login-password" value="" placeholder="Password"/>
                </div>
                
		<div data-role="fieldcontain">
		    <input id="keep-login" type="checkbox" name="checkbox-1" class="custom" data-role="checkbox"/>
		    <label for="keep-login">Remember me</label>
		</div>
			
		<a href="javascript:SignIn();" data-role="button" data-theme="b">Sign In</a>
		
		<p><a href="#signUp" data-transition="slide" >Sign Up</a></p>
            </div>
          
        </div>
         
 
 <!-- Sign Up Form implementation-->
 <div data-role="page" id="signUp">
    <div data-role="header">
        <a href="#signIn" data-transition="slide" data-role="button" data-icon="arrow-l" data-direction="reverse">Back</a>
        <h1>Sign Up</h1>
    </div>
    
    <div data-role="content">
        <h2 align="center">Old Stuff Shopping</h2>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="signup-name" id="label-name" class="ui-input-text">First Name *</label>
	    <input type="text" name="fullname" id="signup-firstname" value="" placeholder="First name"/>
	</div>
	
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="signup-name" id="label-name" class="ui-input-text">Last Name *</label>
	    <input type="text" name="fullname" id="signup-lastname" value="" placeholder="Last name"/>
	</div>
        
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="text" id="label-email" class="ui-input-text">Email *</label>
	    <input type="email" name="email" id="signup-email" value="" placeholder="Email"/>
	</div>
        
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="text" id="label-pass" class="ui-input-text">Password *</label>
	    <input type="password" name="password" id="signup-password" value="" placeholder="Password"/>
	</div>
        
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="text" id="label-confirm-pass" class="ui-input-text">Confirm *</label>
	    <input type="password" name="password" id="signup-confirm-password" value="" placeholder="Confirm password"/>
	</div>
        <p><a href="javascript:SignUp();" data-role="button" data-theme="b">Sign Up</a></p>
    </div>
 </div>
 
 <!-- Recover Password implementation-->
<div data-role="page" id="recoverPassword">
 
    <div data-role="header">
        <a href="#signIn" data-transition="slide" data-role="button" data-icon="arrow-l" data-direction="reverse">Back</a>
        <h1>Recover password?</h1>
    </div>
 
    <div data-role="content">
        <h2 align="center">Old Stuff Shopping</h2>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-hide-label">
            <label>Send me an email to recover my password</label>
            <br><br>
            <input type="email" name="Email" id="user-email" value="" placeholder="Email"/>
        </div>
        <a href="javascript:RecoverPassword()" data-role="button" data-inline="true" data-theme="b">Submit</a>
        <br>
    </div>
 
</div>

<!-- Edit account Info -->
<div data-role="page" id="edit-page" data-dom-cache="true">
    <div data-role="header">
		<h1>Edit Info</h1>
		<a href="#home" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
    </div>
    
    <div data-role="content">
	<h2 align="center">Old Stuff Shopping</h2>
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="signup-name" id="label-name" class="ui-input-text">First Name </label>
	    <input type="text" name="fullname" id="edit-firstname" value="" placeholder="First name"/>
	</div>
	
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="signup-name" id="label-name" class="ui-input-text">Last Name </label>
	    <input type="text" name="fullname" id="edit-lastname" value="" placeholder="Last name"/>
	</div>
        
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="text" id="label-pass" class="ui-input-text">New Password </label>
	    <input type="password" name="password" id="edit-password" value="" placeholder="New password"/>
	</div>
	
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="text" id="label-confirm-pass" class="ui-input-text">Confirm New Password</label>
	    <input type="password" name="password" id="edit-confirm-password" value="" placeholder="Confirm new password"/>
	</div>
	
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="text" id="label-old-pass" class="ui-input-text">Old Password (Required if changing password)</label>
	    <input type="password" name="password" id="edit-old-password" value="" placeholder="Old password"/>
	</div>
	
	<a href="javascript:EditInfo();" data-role="button" data-theme="b">Submit</a>
    </div>
</div>

<!-- Home -->
<div data-role="page" id="home" data-dom-cache="true">
			
    <div data-role="header">
		<h1>Home</h1>
		<a href="javascript:LogOut()" data-role="button" data-transition="slide" data-direction="reverse" class="ui-btn-left">Sign Out</a>
		<a href="#edit-page" data-role="button" data-transition="slide" class="ui-btn-right">Edit</a>
    </div>
			
    <div data-role="content">
		<div id="userInfo"></div>
		<div class="clearer">&nbsp;</div>
		<div class="ui-grid-a">
			<div class="ui-block-a">
				<a href="#received-order-page" data-role="button" data-transition="slide" data-mini="true">Orders To Me</a>
			</div>
			<div class="ui-block-b">
				<a href="#sent-order-page" data-role="button" data-transition="slide" data-mini="true">Orders From Me</a>
			</div>
		</div>
    </div>
	
	<div data-role="footer" class="ui-navbar-custom" data-position="fixed">
		<div data-role="navbar" class="ui-navbar-custom">
			<ul>
				<li><a href="#properties-page" data-icon="i-properties" data-transition="none">Properties</a></li>
				<li><a href="#" data-icon="i-info" class="ui-btn-active ui-state-persist">Home</a></li>
				<li><a href="#shop-page" data-icon="i-shopping" data-transition="none">Shopping</a></li>
			</ul>
		</div>
	</div>
	
</div>
    
    <!-- List of Received Orders -->
    <div data-role="page" id="received-order-page" data-dom-cache="true">   
        <div data-role="header">
            <h2>Received Orders</h2>
            <a href="#home" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
        </div>
        
        <div data-role="content">
            <h2 align="center">Orders To Me</h2>
            <ul data-role="listview" data-filter="true" id="receivedOrderListView">
            </ul>
        </div>       
    </div>
	<!-- Received Order Detail -->
	<div data-role="page" id="received-order-detail-page" data-dom-cache="true">
		<div data-role="header">
            <h2>Received Orders</h2>
            <a href="#received-order-page" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
        </div>
        
        <div data-role="content">
            <h2 align="center">Order Detail</h2>
            <div id="receivedOrderDetail"></div>
        </div>      
	</div>
	
	<!-- List of Sent Orders -->
    <div data-role="page" id="sent-order-page" data-dom-cache="true">        
        <div data-role="header">
            <h2>Sent Orders</h2>
            <a href="#home" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
        </div>
        
        <div data-role="content">
            <h2 align="center">Orders From Me</h2>
            <ul data-role="listview" data-filter="true" id="sentOrderListView">
            </ul>
        </div>      
    </div>
	
	<!-- Sent Order Detail -->
	<div data-role="page" id="sent-order-detail-page" data-dom-cache="true">
		<div data-role="header">
            <h2>Sent Orders</h2>
            <a href="#sent-order-page" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
        </div>
        
        <div data-role="content">
            <h2 align="center">Order Detail</h2>
            <div id="sentOrderDetail"></div>
        </div>      
	</div>

<!-- Properties -->
<div data-role="page" id="properties-page" data-dom-cache="true">
			
    <div data-role="header">
		<h2>Properties</h2>
		<a href="#add-property-page" data-role="button" data-icon="plus" data-iconpos="right" data-transition="slide" class="ui-btn-right">Add</a>
    </div>
			
    <div data-role="content">
		<h2 align="center">My Properties</h2>
		<ul data-role="listview" data-filter="true" id="userPropertiesListView">
		</ul>
    </div>
	
	<div data-role="footer" class="ui-navbar-custom" data-position="fixed">
		<div data-role="navbar" class="ui-navbar-custom">
			<ul>
				<li><a href="#" data-icon="i-properties" class="ui-btn-active ui-state-persist">Properties</a></li>
				<li><a href="#home" data-icon="i-info" data-transition="none">Home</a></li>
				<li><a href="#shop-page" data-icon="i-shopping" data-transition="none">Shopping</a></li>
			</ul>
		</div>
	</div>
	
</div>

<!-- Add New Property -->
<div data-role="page" id="add-property-page" data-dom-cache="true">
			
    <div data-role="header">
		<h2>Property</h2>
		<a href="#properties-page" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
    </div>
			
    <div data-role="content">
	<h2 align="center">New Property</h2>
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="txtItemName" class="ui-input-text">Item Name: </label>
	    <input type="text" name="itemname" id="txtItemName" value="" placeholder="Item Name"/>
	</div>
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	<label for="ddlCategories" class="ui-input-text">Category: </label>			    
	    <select name="category" id="ddlCategories" data-native-menu="false" data-theme="c" >
	        <!--option value="1" class="one" data-theme="c"> Electronics </option>
	        <option value="2" class="two"> Computers & accessories </option>
	        <option value="3" class="three"> Transportations </option>
	        <option value="4" class="four"> Furnitures </option>
	        <option value="5" class="five"> Fashion stuffs </option>
	        <option value="6" class="six"> Daily using stuffs </option-->
	    </select>
	</div>
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="txtItemPrice" class="ui-input-text">Item Price: </label>
	    <input type="text" name="itemprice" id="txtItemPrice" value="" placeholder="Price in US Dollars"/>
	</div>
	<div data-role="fieldcontain">
	    <label for="txtaItemDescription">Description:</label>
	    <textarea cols="40" rows="8" name="textarea" id="txtaItemDescription" value="" placeholder="Description"></textarea>
	</div>
	<div class="clearer">&nbsp;</div>
	<a href="javascript:AddNewProperty();" data-role="button" data-theme="e">Submit</a>
    </div>
	
</div>

<!-- Property Detail -->
<div data-role="page" id="property-detail-page" data-dom-cache="true">
			
    <div data-role="header">
		<h2>Property</h2>
		<a href="#properties-page" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
		<a href="javascript:RemoveProperty()" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Remove</a>
    </div>
			
    <div data-role="content">
	<h2 align="center">Property Detail</h2>
	<div id="propertyDetail"></div>
	<a href="#edit-property-page" data-role="button" data-inline="true" data-transition="slide">Edit</a>
    </div>
	
</div>

<!-- Edit Property -->
<div data-role="page" id="edit-property-page" data-dom-cache="true">
			
    <div data-role="header">
		<h2>Property</h2>
		<a href="#property-detail-page" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
    </div>
			
    <div data-role="content">
	<h2 align="center">Edit Property Info</h2>
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="txtEditItemName" class="ui-input-text">Item Name: </label>
	    <input type="text" name="itemname" id="txtEditItemName" value="" placeholder="Item Name"/>
	</div>
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	    <label for="txtEditItemPrice" class="ui-input-text">Item Price: </label>
	    <input type="number" name="itemprice" id="txtEditItemPrice" value="" placeholder="Price in US Dollars"/>
	</div>
	<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
	<label for="ddlEditCategories" class="ui-input-text">Category: </label>			    
	    <select name="category" id="ddlEditCategories" data-native-menu="false" data-theme="c" >
	        <!--option value="1" class="one" data-theme="c"> Electronics </option>
	        <option value="2" class="two"> Computers & accessories </option>
	        <option value="3" class="three"> Transportations </option>
	        <option value="4" class="four"> Furnitures </option>
	        <option value="5" class="five"> Fashion stuffs </option>
	        <option value="6" class="six"> Daily using stuffs </option-->
	    </select>
	</div>
	<div data-role="fieldcontain">
	    <label for="txtaEditItemDescription">Description:</label>
	    <textarea cols="40" rows="8" name="textarea" id="txtaEditItemDescription" value="" placeholder="Description"></textarea>
	</div>
	<div class="clearer">&nbsp;</div>
	<a href="javascript:EditProperty();" data-role="button" data-theme="e">Submit</a>
    </div>
	
</div>

<!-- Shopping -->
<div data-role="page" id="shop-page" data-dom-cache="true">
			
    <div data-role="header">
		<h2>Shop</h2>
    </div>
			
    <div data-role="content">
		<h2 align="center">Available Stuffs</h2>
			<form>			    
			    <select name="category" id="shopCategoryList" data-native-menu="false" data-mini="true" data-theme="e" >
					
			       <!--option value="1" class="one"> Electronics </option>
			       <option value="2" class="two"> Computers and accessories </option>
			       <option value="3" class="three"> Transportations </option>
			       <option value="4" class="four"> Furnitures </option>
			       <option value="5" class="five"> Fashion stuffs </option>
			       <option value="6" class="six"> Daily using stuffs </option-->
			    </select>
			</form>
			<div class="clearer">&nbsp;</div>
		<ul data-role="listview" data-filter="true" id="shopListView">
		</ul>
    </div>
	
    <div data-role="footer" class="ui-navbar-custom" data-position="fixed">
	<div data-role="navbar" class="ui-navbar-custom">
	    <ul>
		<li><a href="#properties-page" data-icon="i-properties" data-transition="none">Properties</a></li>
		<li><a href="#home" data-icon="i-info" data-transition="none">Home</a></li>
		<li><a href="#" data-icon="i-shopping" class="ui-btn-active ui-state-persist">Shopping</a></li>
	    </ul>
	</div>
    </div>
	
</div>

<!-- Shop Property Detail -->
<div data-role="page" id="shop-property-detail-page" data-dom-cache="true">
			
    <div data-role="header">
		<h2>Property</h2>
		<a href="#shop-page" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
    </div>
			
    <div data-role="content">
        <h2 align="center">Property Detail</h2>
        <div id="shopPropertyDetail"></div>
        <a href="#transaction-page" data-role="button" data-theme="e" data-transition="slide">Own Now</a>
    </div>
	
</div>

    <!-- Profile Detail -->
    <div data-role="page" id="profile-page" data-dom-cache="true" data-add-back-btn="true" data-back-btn-text="Back">
        
        <div data-role="header">
            <h2>Profile</h2>
        </div>
        
        <div data-role="content">
            <h2 align="center">View Profile</h2>
            <div id="profileDetail"></div>
			<div class="ui-grid-a">
				<div class="ui-block-a"><span style="text-align:center;"><b>Rate: </b></span></div>
				<div class="ui-block-b">
				<form>
					<!--label for="rating" class="select"><h4> Rate </h4></label-->
					<select name="rating" id="ddlRate" data-native-menu="false" data-theme="c" data-mini="true" >
						<option value="1" class="one"> Stink </option>
						<option value="2" class="two"> Bad </option>
						<option value="3" class="three"> Average </option>
						<option value="4" class="four"> Pretty good </option>
						<option value="5" class="four"> Excellent </option>
					</select>
				</form>
				</div>
			</div>
			<div class="clearer">&nbsp;</div>
            <a href="javascript:SubmitRating();" data-role="button" data-mini="true" data-inline="true" data-theme="b">Submit</a>
        </div>
        
    </div>

    <!-- Trading/ Buying -->
    <div data-role="page" id="transaction-page" data-dom-cache="true">
        
        <div data-role="header">
            <h2>Transaction</h2>
            <a href="#shop-property-detail-page" data-role="button" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>
        </div>
        
        <div data-role="content">
            <h2 align="center">Own Now</h2>
            <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
                <label for="transaction-money" class="ui-input-text" id="label_transaction-money"><img style="height: 2em; width: 2em; margin-bottom: -8px;" src="./img/"><b> Willing To Pay </b></label>
                <input type="text" name="money" id="transaction-money" value="" placeholder="Price in US Dollars"/>
            </div>
            <form>
                <label for="paymentType" class="select"><h4> Select Payment Type </h4></label>
                <select name="paymentType" id="paymentType" data-native-menu="false" data-theme="c" data-mini="true" data-inline="false">
                    <option value="0" class="one"> Meet in person </option>
                    <option value="1" class="two"> Transfer </option>
                    <option value="2" class="three"> Postal </option>
                    <option value="3" class="four"> Online </option>
                </select>
            </form>
			<div class="clearer">&nbsp;</div>
            <a href="javascript:SendOrder();" data-role="button" data-mini="true" data-inline="true" data-theme="b">Send Order</a>
        </div>
        
    </div>
    
</body>

</html>
